import React, { useEffect, useState, useRef } from 'react'
import { NavBar, Toast } from 'antd-mobile'
import { StarOutline, StarFill, } from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router'
import './index.css'
import { useAppDispatch } from '../../store/hooks'
import { collect, closeUncollect, collectStatus } from '../../store/counterSlice'
import { Grid } from 'react-vant'
import { HomeO, CommentO, } from '@react-vant/icons'
import { CapsuleTabs } from 'antd-mobile'
import { ActionBar } from 'react-vant';
import RecommendationData from '../../component/RecommendationData/Index'
import instance from '../../request/axios'
import { List } from 'react-vant';
// 知识详情
function index() {
    const nav = useNavigate();
    const location = useLocation();
    const [data, setData] = useState({} as any);
    // useAppDispatch
    const dispatch = useAppDispatch();
    useEffect(() => {
        setData(location.state)
        console.log(location.state)
    }, [])
    const back = () => {
        nav(-1)
    }

    const [flag, setFlag] = useState(false);
    const hanldCollect = (data: any) => {
        setFlag(!flag)
        if (flag == false) {
            Toast.show('收藏成功')
            dispatch(collect(data))
            collectStatus(collect(data))
            collectStatus(closeUncollect(data))


        } else {
            Toast.show('取消收藏')
            dispatch(closeUncollect(data))
            collectStatus(collect(data))
            collectStatus(closeUncollect(data))
        }
    }
    const [collectData] = useState([
        {
            id: 1,
            name: '介绍',
            icon: <HomeO />
        },
        {
            id: 2,
            name: '发病原因',
            icon: <CommentO />
        },
        {
            id: 3,
            name: '症状表现',
            icon: <CommentO />
        },
        {
            id: 4,
            name: '如何预防',
            icon: <CommentO />
        },
        {
            id: 5,
            name: '检查',
            icon: <CommentO />
        },
        {
            id: 6,
            name: '治疗方式',
            icon: <CommentO />
        },
        {
            id: 7,
            name: '营养于饮食',
            icon: <CommentO />
        },
        {
            id: 8,
            name: '注意事项',
            icon: <CommentO />
        },
        {
            id: 9,
            name: '康复锻炼',
            icon: <CommentO />
        },
        {
            id: 10,
            name: '预后',
            icon: <CommentO />
        },
        {
            id: 11,
            name: '康复日记',
            icon: <CommentO />
        },
    ])
    const [Recommended, setRecommended] = useState([]);
    const [currentPage, setcurrentPage] = useState<any>(1);
    const [pageSize, setPageSize] = useState<any>(15)
    const [total, setTotal] = useState(0)
    useEffect(() => {
        instance.get('/api/date?currentPage=' + currentPage + '&pageSize=' + pageSize + '').then((res: any) => {
            console.log(res);
            setRecommended(res.data.data)
            setTotal(res.data.total)
            console.log(res.data.total);
            setPageSize(res.data.pageSize);
            setcurrentPage(res.data.currentPage)
        })
    }, [])

    const [finished, setFinished] = useState<boolean>(false)

    const onLoad = async () => {
        // 上拉加载更多
        console.log('上拉加载')
        if (finished) return;
        if (total <= (pageSize * currentPage + 1)) {
            setFinished(true);
            return
        } else {
            setcurrentPage(pageSize * currentPage - 1);
            instance.get('/api/date?currentPage=' + currentPage + '&pageSize=' + pageSize + '').then((res: any) => {
                console.log(res);
                setRecommended((Recommended.concat(res.data.data)))
                setTotal(res.data.total);
                setFinished(false);
            })
            setFinished(true);
            setFinished(false);
        }

    }
    return (
        <div className='gedetails'>
            {/* 顶部 */}
            <div className='gedetails-nav'>
                <NavBar onBack={back}>
                    {
                        data.name
                    }
                </NavBar>
            </div>
            {/* 内容 */}
            <div className='gedetails-content'>
                <div className='gedetails-text'>
                    <div className='gedetails-text-title'>
                        <h2>
                            {
                                data.name
                            }
                        </h2>
                    </div>
                    <div className='gedetailsCollect'>

                        <div onClick={() => hanldCollect(data)}>
                            {
                                flag ? <StarFill fontSize={25} /> : <StarOutline fontSize={25} />
                            }
                            {
                                flag ? "已收藏" : "收藏"
                            }
                        </div>
                    </div>
                </div>


            </div>

            <div className='gedetails-sned'>
                <div>
                    <b className='gedetailsDot'></b>
                    <p className='gedetailsp'>
                        {
                            data.desc
                        }
                    </p>
                </div>
                <div>
                    <b className='gedetailsDot'></b>
                    <p className='gedetailsp'>
                        {
                            data.desc1
                        }
                    </p>
                </div>
                <div>
                    <b className='gedetailsDot'></b>
                    <p className='gedetailsp'>
                        {
                            data.desc2
                        }
                    </p>
                </div>
                <div className='gedetailsBtn'>
                    <button className='btn'>详情 &gt;</button>
                </div>
            </div>

            <div className='gedetailsGrid'>
                <Grid columnNum={4}>
                    {
                        collectData.map((item: any, index: number) => {
                            return (
                                <Grid.Item key={index} icon={item.icon} text={item.name} />
                            )
                        })
                    }

                </Grid>
            </div>


            <div className='gedetailsTabs'>
                <List finished={finished} onLoad={() => onLoad()}>
                    <div className='demo-tabs'>

                        <CapsuleTabs >

                            <CapsuleTabs.Tab title='科普文章' key='fruits'>

                                <RecommendationData Recommended={Recommended}></RecommendationData>

                            </CapsuleTabs.Tab>

                            <CapsuleTabs.Tab title='科普小视频' key='vegetables'>
                                科普小视频
                            </CapsuleTabs.Tab>
                            <CapsuleTabs.Tab title='惠友问答' key='animals'>
                                蚂蚁
                            </CapsuleTabs.Tab>
                        </CapsuleTabs>

                    </div>
                </List>
            </div>


            <div className='demo-action-bar'>
                <ActionBar>
                    <ActionBar.Button
                        type='primary'
                        text='推荐医生'
                        onClick={() => nav('/recommendeddoctor')}
                    />
                    <ActionBar.Button
                        type='primary'
                        text='推荐医院'
                        onClick={() => nav('/recommendedhospital')}
                    />
                </ActionBar>
            </div>




        </div>
    )
}

export default index